class Game {
	constructor() {
		/*
			基础数据
		*/
		this.sW = window.innerWidth; // 获取屏幕宽度
		this.sH = window.innerHeight; // 获取屏幕高度
		this.levels = []; // 所有关卡
		this.maxLevel = this.levels.length;
		if (localStorage.getItem('level')) {
			this.level = localStorage.getItem('level') * 1;
		} else {
			this.level = 1; // 当前关卡
		}
		this.chooseLevel = this.level;
		/*
			所有游戏页面
		*/
		// 开始游戏界面
		this.startPage = document.querySelector('.start');
		this.startBtn = document.querySelector('.start-btn');
		this.levelBtn = document.querySelector('.level-btn');
		// 关卡选择界面
		this.levelPage = document.querySelector('.level');
		this.levelList = document.querySelector('.level-list');
		// 游戏主界面
		this.mainPage = document.querySelector('.main');
		this.elements = document.querySelector('.elements');
		this.levelText = document.querySelector('.level-text');
		this.levelTitle = document.querySelector('.level-title');
		this.wrongTips = document.querySelector('.wrong');
		this.rightTips = document.querySelector('.right');
		this.chooseBtn = document.querySelector('.choose-btn'); //选关
		this.resetBtn = document.querySelector('.reset-btn');
		// 通关提示界面
		this.clearancePage = document.querySelector('.clearance');
		this.tipsText = document.querySelector('.tips-text')
		this.nextLevelBtn = document.querySelector('.next-level-btn');
	}

	//设置关卡数据
	setLevels(data) {
		this.levels = data;
		this.maxLevel = this.levels.length;
	}
	/**
	 * 初始化游戏
	 */
	initGame() {
		// this = new Game()
		var that = this;
		// 初始化关卡
		this.renderLevel();
		// 开始答题按钮 进入游戏主页面
		this.startBtn.ontouchstart = function() {
			// this == this.startBtn
			that.startPage.style.top = -that.sH + 'px';
			that.mainPage.style.display = 'block';
			that.renderNowLevel(that.level);
		}
		// 关卡按钮 进入关卡页面
		this.levelBtn.ontouchstart = function() {
			that.startPage.style.top = -that.sH + 'px';
			that.levelPage.style.display = 'block';
		}
		// 关卡页面 每关按钮绑定事件  事件委派(事件委托)
		this.levelList.ontouchstart = function(ev) {
			// 判断 关卡按钮 有没有  lock 类名
			if (!ev.target.classList.contains('lock')) {
				// 没有lock类名，进入游戏主页
				that.levelPage.style.transition = 'top 0.8s';
				that.levelPage.style.top = -that.sH + 'px';
				that.levelPage.style.zIndex = 10
				that.mainPage.style.transition = 'none';
				that.mainPage.style.display = 'block';
				//点击选择关卡后的页面渲染
				//ev.target.innerHTML值为当前关卡数
				that.chooseLevel = ev.target.innerHTML;
				that.renderNowLevel(ev.target.innerHTML);
			}

		}
		this.nextLevelBtn.ontouchstart = function() {
			//进入关卡加一
			that.chooseLevel *= 1;
			if (
				that.level == that.chooseLevel &&
				that.level + 1 > that.maxLevel
			) {
				alert("就是个测试游戏，玩这么多关干哈！！");
				return;
			}
			if (that.chooseLevel + 1 > that.maxLevel) {
				alert("就是个测试游戏，玩这么多关干哈！！");
				return;
			}
			// 关卡+1
			if (that.level - that.chooseLevel == 0) {
				that.level += 1;
				localStorage.setItem('level', that.level);
				that.renderNowLevel(that.level);

			} else {
				that.chooseLevel += 1;
				that.renderNowLevel(that.chooseLevel);
			}

			that.clearancePage.style.top = -that.sH + 'px';
			that.mainPage.style.transition = "none"
			that.mainPage.style.top = 0;
			that.mainPage.style.display = 'block';
		}
		//游戏主界面选关按钮 注意层级不够要调试按钮层级
		this.chooseBtn.ontouchstart = function() {
			that.mainPage.style.transition = 'top 0.8s';
			that.mainPage.style.top = -that.sH + 'px';
			that.levelPage.style.transition = "none";
			that.levelPage.style.display = 'block';
			that.levelPage.style.top = 0;
		}
		this.resetBtn.ontouchstart = function() {
			that.renderNowLevel(that.chooseLevel);
		}
	}
	initMain() {
		var that = this;
		setTimeout(function() {
			that.levelPage.style.zIndex = 9;
		}, 800);
		//每次渲染关卡时调用
		/*初始化当前管卡*/
		//访问完成，清空内容
		this.elements.innerHTML = "";
		//隐藏×
		this.wrongTips.style.display = 'none';
		//隐藏对勾
		this.rightTips.style.display = 'none';
	}

	/*
	
	*/
	/**
	 * 渲染关卡列表
	 */
	renderLevel() {
		var str = "";
		for (var i = 0; i < this.levels.length; i++) {
			if (this.level == this.levels[i].level) {
				// 当前正在过关
				str += '<div class="level-item">' + this.levels[i].level + '</div>'
			} else if (this.levels[i].level < this.level) {
				// 已经通过关卡
				str += '<div class="level-item success">' + this.levels[i].level + '</div>'
			} else {
				// 还未过关
				str += '<div class="level-item lock">' + this.levels[i].level + '</div>'
			}
		}
		this.levelList.innerHTML = str;
	}
	/**
	 * 渲染当前关卡
	 */
	renderNowLevel(level) {
		this.initMain();
		//选关时主界面下来
		this.mainPage.style.top = 0;
		var levelData = this.levels[level - 1];
		// 修改关卡 
		this.levelText.innerHTML = 'LV.' + level;
		// 修改关卡标题
		this.levelTitle.innerHTML = levelData.title;

		for (var i = 0; i < levelData.elements.length; i++) {
			if (levelData.elements[i].click) {
				this._createClickElem(levelData.elements[i])
			} else if (levelData.elements[i].dragable) {
				// 创建 拖拽的元素
				this._createDragElem(levelData.elements[i])
			}

		}
	}
	_createImg(data) {
		var img = document.createElement('img');
		img.src = data.src;
		img.style.position = 'absolute';
		img.style.width = data.w + 'vw';
		img.style.height = data.h + 'vw';
		img.style.left = data.x + 'vw';
		img.style.top = data.y + 'vw';
		img.style.zIndex = data.zIndex;
		this.elements.appendChild(img);
		return img;
	}
	_createClickElem(data) {
		var that = this;
		var img = this._createImg(data);
		img.ontouchstart = function() {
			if (data.clickFlag) {
				that.wrongTips.style.display = 'none';
				that.rightTips.style.left = data.x + 'vw';
				that.rightTips.style.top = data.y + 'vw';
				that.rightTips.style.display = 'block';
				// 进入 通关页面
				// 修改通关提示页 隐藏、top改为0
				that.clearancePage.style.display = 'none';
				that.clearancePage.style.top = 0;
				setTimeout(function() {
					that.mainPage.style.top = -that.sH + 'px';
					that.clearancePage.style.display = 'block';
					that.tipsText.innerHTML = that.levels[that.level - 1].successTips;
				}, 1000)
			} else {
				that.rightTips.style.display = 'none';
				that.wrongTips.style.left = data.x + 'vw';
				that.wrongTips.style.top = data.y + 'vw';
				that.wrongTips.style.display = 'block';
			}
		}
	}
	/**
	 * 创建可拖拽的元素
	 */
	_createDragElem(data) {
		
		var img = this._createImg(data);
		// 拖拽逻辑
		img.ontouchstart = function(ev) {
			var obj = ev.changedTouches[0];
			var lenX = obj.clientX - img.offsetLeft;
			var lenY = obj.clientY - img.offsetTop;
			img.ontouchmove = function(ev) {
				var obj = ev.changedTouches[0];
				var x = obj.clientX - lenX;
				var y = obj.clientY - lenY;
				img.style.left = x + 'px';
				img.style.top = y + 'px';
			}
			img.ontouchend = function() {
				img.ontouchmove = null;
				img.ontouchend = null;
			}
		}
	}

}

var game = new Game();
game.setLevels(levels);
game.initGame();
